import _ from 'lodash';
import React, {Component} from 'react';
import {StyleSheet, ScrollView, Alert} from 'react-native';
import {
  Colors,
  View,
  Text,
  ColorPalette,
  ColorInfo,
  Button
} from 'react-native-ui-lib';
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
import {TestCase, TestSuite} from '@rnoh/testerino';

interface State {
  color: string;
  defaultColor: string;
  textColor?: string;
  customColors: string[];
  paletteChange: boolean;
  backgroundColor: string;
  showPicker: boolean;
}

const INITIAL_COLOR = Colors.$backgroundPrimaryHeavy;
// prettier-ignore
const colors = [
  '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5',
  '#3182C8', '#4196E0', '#459FED', '#57a8ef', '#8fc5f4', '#b5d9f8', '#daecfb', '#ecf5fd',
  '#00AAAF', '#32BABC', '#3CC7C5', '#64D4D2', '#8BDFDD', '#B1E9E9', '#D8F4F4', '#EBF9F9',
  '#00A65F', '#32B76C', '#65C888', '#84D3A0', '#A3DEB8', '#C1E9CF', '#E8F7EF', '#F3FBF7',
  '#E2902B', '#FAA030', '#FAAD4D', '#FBBD71', '#FCCE94', '#FDDEB8', '#FEEFDB', '#FEF7ED',
  '#D9644A', '#E66A4E', '#F27052', '#F37E63', '#F7A997', '#FAC6BA', '#FCE2DC', '#FEF0ED',
  '#CF262F', '#EE2C38', '#F2564D', '#F57871', '#F79A94', '#FABBB8', '#FCDDDB', '#FEEEED',
  // '#8B1079', '#A0138E', '#B13DAC', '#C164BD', '#D08BCD', '#E0B1DE', '#EFD8EE', '#F7EBF7'
];

class ColorPickerScreen extends Component<{}, State> {
  state: State = {
    color: INITIAL_COLOR,
    defaultColor: '#FF0000',
    textColor: Colors.$textDefaultLight,
    customColors: [],
    paletteChange: false,
    backgroundColor: Colors.$backgroundDefault,
    showPicker: false,
  };

  onSubmit = (color: string, textColor: string) => {
    const {customColors} = this.state;
    customColors.push(color);
    this.setState({
      color,
      textColor,
      customColors: _.clone(customColors),
      paletteChange: false,
    });
  };

  onPaletteValueChange = (value: string, colorInfo: ColorInfo) => {
    this.setState({
      color: value,
      textColor: colorInfo?.tintColor,
      paletteChange: true,
    });
  };

  onValueChange = (value: string, colorInfo: ColorInfo) => {
    this.setState({
      defaultColor: value,
      textColor: colorInfo?.tintColor,
      paletteChange: true,
    });
  };

  render() {
    const {color, defaultColor, textColor, paletteChange, backgroundColor} =
      this.state;
    const paletteValue = paletteChange ? color || INITIAL_COLOR : undefined;

    return (
      <TestSuite name="ColorPalette组件">
        <TestCase itShould="animatedIndex 设置1">
          <View>
            <ColorPalette
              value='#FF12FF'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              animatedIndex={1}
            />
          </View>
        </TestCase>
        <TestCase itShould="value 设置#FF0000">
          <View>
            <ColorPalette
              value='#FF0000'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 colors:[ #FF0000, #FFFF00, #FF00FF] ">
          <View>
            <ColorPalette
              value='#FF1234'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 onValueChange">
          <View>
            <ColorPalette
              value={defaultColor}
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              onValueChange={(value: string, colorInfo: ColorInfo) => {
                this.onValueChange(value, colorInfo)
                Alert.alert(`onValueChange color: ${value}`)
              }}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 swatchStyle">
          <View>
            <ColorPalette
              value='#ff1234'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              swatchStyle={styles.swatch}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 backgroundColor: green">
          <View>
            <ColorPalette
              value='#FF1234'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
              backgroundColor={'green'}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 testID">
          <View>
            <ColorPalette
              testID='colorPalette'
              value='#FF1234'
              colors={['#FF0000', '#FFFF00', '#FF00FF']}
            />
            <Button
              onPress={()=>{
                Alert.alert("testID: colorPalette")
              }}>
              <Text white>testID</Text>
            </Button>
          </View>
        </TestCase>
        <TestCase itShould="设置 containerWidth">
          <View>
            <Text marginL-20 marginB-4 marginT-8>
              containerWidth:160
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={['#FF0000', '#FFFF00', '#FF00FF', '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5']}
              containerWidth={160}
              style={{
                backgroundColor:'#00ffff',
                borderRadius:8
              }}
            />
            <Text marginL-20 marginB-4 marginT-8>
              containerWidth:200
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={['#FF0000', '#FFFF00', '#FF00FF', '#20303C', '#43515C', '#66737C', '#858F96', '#A3ABB0', '#C2C7CB', '#E0E3E5', '#F2F4F5']}
              containerWidth={200}
              style={{
                backgroundColor:'#00ffff',
                borderRadius:8
              }}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 loop">
          <View>
            <Text marginL-20 marginB-4 marginT-8>
              loop: true
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={colors}
              containerWidth={330}
              loop= {true}
            />
            <Text marginL-20 marginB-4 marginT-8>
              loop: false
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={colors}
              containerWidth={330}
              loop= {false}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 containerStyle:{borderRadius=12}">
          <View>
            <ColorPalette
              value={paletteValue}
              onValueChange={this.onPaletteValueChange}
              colors={colors}
              containerStyle={styles.paletteContainer}
              backgroundColor='pink'
              containerWidth={330}
              loop={false}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 style:{backgroundColor:'#00ff00', borderRadius:8}">
          <View>
            <ColorPalette
              testID='colorPalette'
              value={paletteValue}
              onValueChange={this.onPaletteValueChange}
              colors={colors}
              containerStyle={styles.paletteContainer}
              style={styles.paletteContent}
              backgroundColor='pink'
              containerWidth={330}
              loop={false}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 numberOfRows">
          <View>
            <Text marginL-20 marginB-4 marginT-8>
              numberOfRows: 3
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={colors}
              containerWidth={330}
              numberOfRows={3}
              loop= {false}
            />
            <Text marginL-20 marginB-4 marginT-8>
              numberOfRows: 4
            </Text>
            <ColorPalette
              value='#FF12FF'
              colors={colors}
              containerWidth={330}
              numberOfRows={4}
              loop= {false}
            />
          </View>
        </TestCase>
        <TestCase itShould="设置 usePagination">
          <View>
            <Text marginL-20>usePagination:false</Text>
            <ColorPalette
              colors={colors}
              containerWidth={330}
              numberOfRows={4}
              usePagination={false}
            />
            <Text marginL-20>usePagination:true</Text>
            <ColorPalette
              colors={colors}
              containerWidth={330}
              usePagination={true}
            />
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.$backgroundNeutralLight,
  },
  paletteContainer: {
    // 外部容器样式
    borderRadius: 12
  },
  paletteContent: {
    backgroundColor:'#00ff00',
    marginStart:2,
    marginEnd:4,
    marginTop:10,
    borderRadius:8
  },
  swatch: {
    borderRadius:8
  }
});

export default gestureHandlerRootHOC(ColorPickerScreen);
